INTRODUCTION
Working in the NIHI digital team to develop a research website and supporting infographics. These materials showcase the work of the University of Auckland academic team in antibiotic stewardship, promoting safe antibiotic use for future generations in Aotearoa.TEAM
Alexandra Rengifo, DesignerAdrianna Yiu, Designer
Elaine Umali, Digital Programme Manager
Ross Baker, Developer
WHAT I CONTRIBUTED IN
User ResearchStakeholder Interviews and Communication
Design System
Wireframing and Prototyping
Copy Writing
Infographics
RESULTS
A website that pioneers safe antibiotic use for patients and GPs BACKGROUND
Antibiotic Conservation AotearoaWEBSITE OBJECTIVE
Co-designed with experts and GPs, Antibiotic Conservation Aotearoa aims to reduce inappropriate antibiotic prescribing and empower patients to make informed health decisions.COMPETETIVE ANALYSIS
Why do current research websites feel so cold?KEY TAKEAWAY #1
🧊 Clinical and robotic communication.Medical jargon, in addition to the crowded layouts may cause users to feel overwhelmed upon onboarding.
KEY TAKEAWAY #2
🧩 Lack of intuitive design and exploration nudges.Complicated navigation and lack of user control may cause users to feel out of place and give up on the task more quickly.
INITIAL WIREFRAMES / STAKEHOLDER MEETINGS
Co-designing with the research teamWhether you are a well-versed clinician or a layperson, we wanted to create a website that welcomes the diverse people of Aotearoa, imagining it in both homes and clinical settings. The initial set of wireframes serves as an idea generator for stakeholders to capture visual preferences and ensure the content basis is covered.SYNTHESIS
Key considerations for the initial set of wireframes
Experimenting with various ways of adding interactive portions to encourage exploration and nudge to leads, such as hover cards and switch tabs.
Markers of legitimacy.
Adding visual markers that signify legitimacy of information. For example, utilising statistics for immediate context call-out.
Designing with content limits.
At sections with pending content, create versions that display design with maximum character limit to control drastic design changes down the line.
FOCUS
One of the main focus after review was to incorporate website standing by weaving branding and researcher voice into seamless user workflows.DESIGN SYSTEM
Establishing a sense of warmth and dependability with type and colourWe opted for a simple, rounded typefaces aimed at creating feeelings of friendliness, and created a color palette that easily corresponds to different elements to deliver a smart and cohesive visual flow throughout the website.
FINAL DESIGNS
How do we relay scientific research to cater to both the patients and the GPs?HOW MIGHT WE
Organise the information on the website so that navigating material and topics is easy?
SYNTHESIS
Accessible filter
Detailed but accessible copy.
Considering the diverse skill levels of users interacting with the website, with simple copy, are able to explore with less navigation friction.
HOW MIGHT WE
Eliminate the cold and “clinical” expression of information?SYNTHESIS
Human-focus approachInvestigator focus.
Softening the process of finding learning material which often times feels static and cold by specifying dates, resource type and authors. In this way, the response of feeling with the interactions are immediate.
SYNTHESIS
Intentional suggestions
Clear course of action.
Increasing the flow by providing related suggestions, and having a multitude of actions available on a single page at a time.
User control.
HOW MIGHT WE
Go about designing the our research and about page?
SYNTHESIS
Encapsulating the crux of the project advocacy
Considerate and sharp.
To avoid information overwhelm, utilising layout options to transform what would be visually chunky information into beautiful, easily digestible sections.
HOW MIGHT WE
Translate to mobile responsive design?
SYNTHESIS
Translating features without losing functionality
Making a pushed version with the most characters to fit into a card to foresee appearance and eliminate issues down-the-line, especially in development.
Opportunities for exploration.
Designing a fun sorting filter and providing just enough friction cues for users to feel encouraged in exploring the other pages. Framing the journey as an experience rather than a task.
REFLECTION
💡 Working in a close-knit team of product manager, developer and designers.Developers often provide great insight on design scalability like how the hover cards may scale on mobile, or more efficient ways on animating prototypes from designers. Grateful to widen perspectives on the production as a whole product and adopting skills from the team.
REFLECTION
🌱 Adapting within the design process.Leaning into stakeholder and team feedback and constraints like time. Utilising how to best use your skills and time as a designer to advocate for the end-user, and cater to the project as a holistic goal. Stakeholders may have different methodologies so learning how to continuously evolve into what the project needs or what would make the process more efficient.